<template>
  <div class="video-monitor">
    <!-- 视频控制面板 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="control-panel">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.videoControl') }}</span>
              <div class="control-buttons">
                <el-button-group>
                  <el-button :type="layoutType === 'single' ? 'primary' : 'default'" size="small"
                             @click="changeLayout('single')">{{ $t('deviceDetail.singleView') }}</el-button>
                  <el-button :type="layoutType === 'quad' ? 'primary' : 'default'" size="small"
                             @click="changeLayout('quad')">{{ $t('deviceDetail.quadView') }}</el-button>
                  <el-button :type="layoutType === 'nine' ? 'primary' : 'default'" size="small"
                             @click="changeLayout('nine')">{{ $t('deviceDetail.nineView') }}</el-button>
                </el-button-group>
                <el-button type="primary" size="small" @click="refreshVideos"
                           :icon="Refresh">{{ $t('common.refresh') }}</el-button>
              </div>
            </div>
          </template>
          <div class="camera-selector">
            <el-select v-model="selectedCamera" :placeholder="$t('deviceDetail.selectCamera')" style="width: 200px;">
              <el-option
                v-for="camera in cameraList"
                :key="camera.id"
                :label="camera.name"
                :value="camera.id"
              />
            </el-select>
            <el-button type="primary" @click="addCamera" :icon="Plus">{{ $t('deviceDetail.addCamera') }}</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 视频显示区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="video-display">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.videoDisplay') }}</span>
              <div class="display-info">
                <span class="info-item">{{ $t('deviceDetail.totalCameras') }}: {{ cameraList.length }}</span>
                <span class="info-item">{{ $t('deviceDetail.onlineCount') }}: {{ onlineCameras }}</span>
              </div>
            </div>
          </template>
          <div class="video-grid" :class="layoutType">
            <div v-for="camera in displayedCameras" :key="camera.id" class="video-item"
                 @click="selectVideo(camera)"
                 :class="{ active: selectedVideo?.id === camera.id }">
              <div class="video-container">
                <div class="video-placeholder"
                     :style="{ backgroundImage: camera.online ? 'linear-gradient(45deg, #1e3c72 0%, #2a5298 100%)' : '#f5f7fa' }">
                  <div class="video-content">
                    <i v-if="!camera.online" class="el-icon-video-camera"></i>
                    <i v-else-if="camera.recording" class="el-icon-video-camera-solid recording"></i>
                    <i v-else class="el-icon-video-play"></i>
                    <div class="video-info">
                      <div class="camera-name">{{ camera.name }}</div>
                      <div class="camera-status">                           :class="{ online: camera.online, offline: !camera.online, recording: camera.recording }">
                        {{ camera.online ? (camera.recording ? '录制中' : '在线') : '离线' }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="video-controls">
                  <el-button-group size="mini">
                    <el-button :type="camera.online ? 'success' : 'info'" :icon="View"
                               @click.stop="viewCamera(camera)">{{ $t('deviceDetail.view') }}</el-button>
                    <el-button v-if="camera.online" type="primary" :icon="VideoPlay"
                               @click.stop="playCamera(camera)">{{ $t('deviceDetail.play') }}</el-button>
                    <el-button v-if="camera.online" type="danger" :icon="VideoPause"
                               @click.stop="stopCamera(camera)">{{ $t('deviceDetail.stop') }}</el-button>
                  </el-button-group>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 选中视频详情 -->
    <el-row v-if="selectedVideo" :gutter="20" style="margin-top: 20px;">
      <el-col :span="16">
        <el-card class="video-detail">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.videoDetails') }} - {{ selectedVideo.name }}</span>
              <el-button type="primary" link :icon="Close" @click="closeVideoDetail">{{ $t('common.close') }}</el-button>
            </div>
          </template>
          <div class="video-player">
            <div class="player-placeholder"
                 :style="{ backgroundImage: selectedVideo.online ? 'linear-gradient(45deg, #1e3c72 0%, #2a5298 100%)' : '#f5f7fa' }">
              <div class="player-content"
                   v-if="selectedVideo.online">
                <i class="el-icon-video-play"></i>
                <p>{{ $t('deviceDetail.videoStream') }}</p>
                <p class="video-resolution">{{ $t('deviceDetail.resolution') }}: 1920x1080</p>
              </div>
              <div class="player-offline" v-else>
                <i class="el-icon-video-camera"></i>
                <p>{{ $t('deviceDetail.cameraOffline') }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="camera-info">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.cameraInfo') }}</span>
            </div>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item :label="$t('deviceDetail.cameraName')">{{ selectedVideo.name }}</el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.cameraId')">{{ selectedVideo.id }}</el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.cameraType')">{{ selectedVideo.type }}</el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.installLocation')">{{ selectedVideo.location }}</el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.installTime')">{{ selectedVideo.installTime }}</el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.resolution')">1920x1080</el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.networkStatus')">
              <el-tag :type="selectedVideo.online ? 'success' : 'danger'">
                {{ selectedVideo.online ? $t('deviceDetail.online') : $t('deviceDetail.offline') }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { View, VideoPlay, VideoPause, Refresh, Plus, Close } from '@element-plus/icons-vue'

const layoutType = ref('quad')
const selectedCamera = ref('')
const selectedVideo = ref(null)

const cameraList = ref([
  {
    id: 1,
    name: '储能区全景摄像头',
    type: '球机',
    location: '储能区南侧',
    installTime: '2023-08-15',
    online: true,
    recording: false
  },
  {
    id: 2,
    name: 'PCS设备摄像头',
    type: '枪机',
    location: 'PCS室',
    installTime: '2023-08-15',
    online: true,
    recording: true
  },
  {
    id: 3,
    name: '电池舱摄像头',
    type: '球机',
    location: '电池舱内',
    installTime: '2023-08-15',
    online: false,
    recording: false
  },
  {
    id: 4,
    name: '控制室摄像头',
    type: '半球',
    location: '控制室',
    installTime: '2023-08-15',
    online: true,
    recording: false
  },
  {
    id: 5,
    name: '配电室摄像头',
    type: '枪机',
    location: '配电室',
    installTime: '2023-08-15',
    online: true,
    recording: false
  },
  {
    id: 6,
    name: '消防通道摄像头',
    type: '枪机',
    location: '消防通道',
    installTime: '2023-08-15',
    online: false,
    recording: false
  },
  {
    id: 7,
    name: '周界摄像头01',
    type: '球机',
    location: '厂区东侧',
    installTime: '2023-08-15',
    online: true,
    recording: false
  },
  {
    id: 8,
    name: '周界摄像头02',
    type: '球机',
    location: '厂区西侧',
    installTime: '2023-08-15',
    online: true,
    recording: false
  }
])

const onlineCameras = computed(() => {
  return cameraList.value.filter(camera => camera.online).length
})

const displayedCameras = computed(() => {
  const maxDisplay = layoutType.value === 'single' ? 1 : layoutType.value === 'quad' ? 4 : 9
  return cameraList.value.slice(0, maxDisplay)
})

const changeLayout = (type) => {
  layoutType.value = type
}

const addCamera = () => {
  if (selectedCamera.value) {
    const camera = cameraList.value.find(c => c.id === selectedCamera.value)
    if (camera) {
      ElMessage.success(`已添加摄像头: ${camera.name}`)
    }
  } else {
    ElMessage.warning('请先选择摄像头')
  }
}

const refreshVideos = () => {
  ElMessage.success('视频列表已刷新')
}

const selectVideo = (camera) => {
  selectedVideo.value = camera
}

const viewCamera = (camera) => {
  if (camera.online) {
    selectedVideo.value = camera
    ElMessage.success(`正在查看: ${camera.name}`)
  } else {
    ElMessage.error('摄像头离线，无法查看')
  }
}

const playCamera = (camera) => {
  if (camera.online) {
    camera.recording = true
    ElMessage.success(`开始播放: ${camera.name}`)
  } else {
    ElMessage.error('摄像头离线，无法播放')
  }
}

const stopCamera = (camera) => {
  camera.recording = false
  ElMessage.success(`停止播放: ${camera.name}`)
}

const closeVideoDetail = () => {
  selectedVideo.value = null
}

onMounted(() => {
  // 模拟定时更新摄像头状态
  setInterval(() => {
    cameraList.value.forEach(camera => {
      // 随机更新在线状态（90%概率保持在线）
      if (Math.random() > 0.9) {
        camera.online = !camera.online
        if (!camera.online) {
          camera.recording = false
        }
      }
    })
  }, 30000) // 30秒更新一次
})
</script>

<style scoped>
.video-monitor {
  height: 100%;
  overflow-y: auto;
}

.control-panel, .video-display, .video-detail, .camera-info {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

.control-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.camera-selector {
  display: flex;
  gap: 12px;
  align-items: center;
}

.display-info {
  display: flex;
  gap: 20px;
  align-items: center;
}

.info-item {
  font-size: 14px;
  color: #606266;
}

.video-grid {
  display: grid;
  gap: 16px;
  min-height: 400px;
}

.video-grid.single {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.video-grid.quad {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.video-grid.nine {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.video-item {
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.video-item:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.video-item.active {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.video-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.video-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #1e3c72 0%, #2a5298 100%);
  color: #fff;
  position: relative;
  min-height: 200px;
}

.video-placeholder.offline {
  background: #f5f7fa;
  color: #909399;
}

.video-content {
  text-align: center;
}

.video-content i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.video-content i.recording {
  color: #f56c6c;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.video-info {
  margin-top: 16px;
}

.camera-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.camera-status {
  font-size: 14px;
}

.camera-status.online {
  color: #67c23a;
}

.camera-status.offline {
  color: #f56c6c;
}

.camera-status.recording {
  color: #f56c6c;
  animation: pulse 2s infinite;
}

.video-controls {
  padding: 12px;
  background: #f8f9fa;
  border-top: 1px solid #e4e7ed;
}

.video-player {
  height: 400px;
}

.player-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #1e3c72 0%, #2a5298 100%);
  color: #fff;
  border-radius: 6px;
}

.player-placeholder.offline {
  background: #f5f7fa;
  color: #909399;
}

.player-content {
  text-align: center;
}

.player-content i {
  font-size: 64px;
  margin-bottom: 16px;
  display: block;
}

.video-resolution {
  font-size: 14px;
  color: #ccc;
  margin: 0;
}

.player-offline {
  text-align: center;
}

.player-offline i {
  font-size: 64px;
  margin-bottom: 16px;
  display: block;
}
</style>